<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			html,body{
				height: 100%;
			}
			body{
				margin: 0px;
				padding: 0px;
				background: #ffa5a5;
			}
			.chest{
				width: 500px;
				height: 500px;
				margin: 0 auto;
				position: relative;
			}
			.heart{
				position: absolute;
				z-index: 2;
				background:linear-gradient(-90deg,#f50a45 0%,#d5093c 40%);
				animation: beat 0.7s ease 0s infinite normal;
			}
			.heart.center{
				background: linear-gradient(-45deg,#b80734 0%,#d5093c 40%);
				transform: scale(1) rotate(225deg);
			}
			.heart.top{
				z-index: 3;
			}
			.side{
				top: 100px;
				width: 220px;
				height: 220px;
				transform: rotate(225deg);
				border-radius: 220px;
			}
			
			.center{
				width: 210px;
				height: 210px;
				bottom: 100px;
				left: 145px;
				text-indent: -9999px;
			}
			
			.left{
				left: 62px;
			}
			.right{
				right: 62px;
				
			}
			.bottom-1{
				color: beige;
				font-size: 28px;
				font-weight: bold;
				text-shadow: .2rem 0rem .5remm red,-.2rem 0rem .5rem red;
			}
			@keyframes beat{
			
				0%{
					transform: scale(1) rotate(225deg);
					box-shadow: 0 0 40px #d5093c;
				}
				50%{
					transform: scale(1.1) rotate(225deg);
					box-shadow: 0 0 70px #d5093c;
				}
				100%{
					transform: scale(1) rotate(225deg);
					box-shadow: 0 0 40px #d5093c;
				}
			}
		</style>
	</head>
	<body>
		<div class="chest">
			<div class="heart left side top"></div>
			<div class="heart center"></div>
			<div class="heart right side"></div>
		</div>
		<div>
			<center><p class="bottom-1">我爱你</p></center>
		</div>
	</body>
</html>
